<template>
  <view
    style="
      width: 334rpx;
      height: 392rpx;
      border-radius: 20rpx;
      position: relative;
    "
  >
    <image
      :src="drama.imageUrl"
      style="width: 100%; height: 100%; border-radius: 20rpx"
    />
    <view
      style="
        position: absolute;
        left: 18rpx;
        top: 250rpx;
        display: flex;
        flex-direction: column;
      "
    >
      <view
        style="
          font-size: 28rpx;
          line-height: 40rpx;
          color: #fff;
          font-weight: bold;
        "
        >{{ drama.title }}</view
      >
      <view
        style="
          font-size: 24rpx;
          line-height: 34rpx;
          color: #fff;
          width: 288rpx;
          height: 68rpx;
        "
        >{{ _.truncate(drama.description, { length: 18 }) }}</view
      >
    </view>
  </view>
</template>
<script>
import Drama from "@/pages/members/collect/component/drama/index";
export default {
  name: "drama-component",
  props: {
    drama: {
      type: Drama,
    },
  },
};
</script>
